<template>
  <div class="ele-body">
    <el-row :gutter="20">
      <el-col :span="18">
        <el-card>
          <div slot="header">
            <h5>{{ info.name }}</h5>
          </div>
          <div class="info-item_list">
            <ul>
              <li>
                <span>任务目标：</span>
                <span>{{ info.target }}</span>
              </li>
              <li>
                <span>任务类型：</span>
                <span>{{ info.type.name }}</span>
              </li>
              <li>
                <span>
                  绑定资产：
                </span>
                <a>
                  <span v-for="(item,key) in info.asset" :key="'task'+key">
                    {{ item.name }}
                  </span>
                </a>
              </li>
              <li>
                <span>
                  对接人：
                </span>
                <span>
                  {{ info.person.name }}
                </span>
              </li>
              <li>
                <span>
                  负责人：
                </span>
                <span>
                  {{ info.manage | getManages }}
                </span>
              </li>
              <li>
                <span>
                  创建时间：
                </span>
                <span>
                  {{ info.start_time | moment }}
                </span>
              </li>
              <li>
                <span>
                  任务描述：
                </span>
                <span>
                  {{ info.description }}
                </span>
              </li>
            </ul>
          </div>
        </el-card>
        <el-card style="height:565px">
          <div slot="header" class="clearfix">
            <span>扫描漏洞</span>
          </div>
          <ele-data-table
            ref="table"
            :config="table"
            :choose.sync="choose"
            highlight-current-row
          >
            <template slot-scope="{}">
              <el-table-column
                prop="name"
                label="漏洞名称"
                show-overflow-tooltip
                min-width="110"
              />
              <el-table-column
                prop="level"
                label="漏洞等级"
                show-overflow-tooltip
                min-width="135"
              >
                <template slot-scope="{ row }">{{ row.level.name }}</template>
              </el-table-column>
              <el-table-column
                prop="source"
                label="漏洞来源"
                show-overflow-tooltip
                min-width="135"
              >
                <template slot-scope="{ row }">{{ row.source.name }}</template>
              </el-table-column>
              <el-table-column
                prop="type"
                label="漏洞类型"
                show-overflow-tooltip
                min-width="135"
              >
                <template slot-scope="{ row }">{{ row.type.name }}</template>
              </el-table-column>
              <el-table-column
                prop="create_time"
                label="创建时间"
                show-overflow-tooltip
                min-width="135"
              >
                <template slot-scope="{ row }">{{
                  row.add_time | moment
                }}</template>
              </el-table-column>
              <el-table-column
                prop="update_time"
                label="更新时间"
                show-overflow-tooltip
                min-width="135"
              >
                <template slot-scope="{ row }">{{
                  row.update_time | moment
                }}</template>
              </el-table-column>
            </template>
          </ele-data-table>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>更新记录</span>
          </div>
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in log"
              :key="index"
              :timestamp="item.updatetime"
              :color="item.status === 'True' ? '#0bbd87' : '#FF5722'"
              placement="top"
              style="min-height:750px;"
            >
              <ul class="log-item">
                <li>
                  <span>操作用户：</span>{{ item.user === "None" ? "系统" : item.user }}
                </li>
                <li>
                  <span> 操作描述： </span>
                  <p>{{ item.description }}</p>
                </li>
              </ul>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getTicket } from '@/api/workflow'
import dayjs from 'dayjs'
export default {
  name: 'TaskDetial',
  filters: {
    moment: function(value) {
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    },
    getManages: function(value) {
      if (value === 'None') {
        return '暂无'
      } else {
        const manages = []
        value.map(manage => {
          manages.push(manage.name)
        })
        return manages.toString()
      }
    }
  },
  data() {
    return {
      ticketId: 0,
      info: {
        id: null,
        person: {},
        type: {},
        manage: []
      },
      log: [],
      table: {
        url: '',
        where: {}
      },
      choose: []
    }
  },
  mounted() {
    this.ticketId = this.$route.params.id
    this.getTaskDetial()
  },
  methods: {
    getTaskDetial() {
      getTicket(this.ticketId).then(res => {
        this.info = res.data.data.info
        this.log = res.data.data.log
        this.table.url = `/task/vuln/list/${this.info.id}/`
        this.$refs.table.reload()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
li {
  list-style: none;
}
.info-item_list {
  margin: 5px;
  padding: 3px;
  li {
    margin: 5px 0;
    span {
      margin-right: 3px;
    }
  }
}

.log-item {
  li {
    margin: 5px 0;
  }
}
</style>
